<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>王思聪吃热狗</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>

  <img class="wsc" src="./img/wsc.jpg" alt="王思聪">
  
  <div class="play-panel">
    <div class="start"><span class="btn">❥开始游戏</span></div>
    <div class="stop">
      <div class="title">游戏结束</div>
      <div class="score">60分</div>
      <div class="btn">※重新开始※</div>
    </div>
  </div>
  
  <div class="game-score">
    <h1>剩余时间<span>60</span>秒</h1>
    <h1>+0分</h1>
  </div>

  <script>
  function random(min,max) {
    return Math.floor( Math.random()*(max-min+1)+min) ;
  }

  //全局变量
  var wscObj =  document.querySelector('.wsc');
  var score = 0;
  var wscX = 0;
  var wscY = (window.innerHeight||document.documentElement.clientHeight) - wscObj.offsetHeight;
  

  // 随机食物 x轴
  
  function startFoodPlay(){
      // 返回定时器唯一标识
      return setInterval(() => {
        // 初始化数据
        var imgObj = document.createElement('img');

        // 食物出现概率
        var who = random(0,9) ;
        
        // 判断出现的食物
        // 68-冠军
        if ([6,8].includes(who))
        {
          imgObj.className = 'food guanjun';
          imgObj.src = './img/guanjun.jpg';
          imgObj.setAttribute('type', 'guanjun');
          //01234579-热狗
        } else {
          imgObj.className = 'food hotdog';
          imgObj.src = './img/hotdog.jpg';
          imgObj.setAttribute('type', 'hotdog');
      }

      // 追加食物到页面
      var min = 0;
      var max = (window.innerWidth || document.documentElement.clientWidth) - imgObj.offsetWidth;
      imgObj.style.left = random(min, max) + 'px';
      imgObj.style.top = '0px';
      document.body.appendChild(imgObj);
    }, 1000)
  }
  // 首次开始
  var foodT = startFoodPlay() ;


  //  食物掉落 y轴
  setInterval(() => {
    // 获取所有食物
    var foods = document.querySelectorAll('.food');
    // 遍历
    foods.forEach((item, index) => { 
      // 计算top数据：原来的top + 2
      var top = parseInt(item.style.top) + 2;
      // var一个变量，判断位置  
      var maxTop = (window.height || document.documentElement.clientHeight) - item.offsetHeight；
      if (top >= maxTop) {
        //超出-网页移除
        document.body.removeChild(item);
        //没超出-重置top
      } else {
        item.style.top = top + 'px'
      }

      // 食物掉落判断是否在王思聪范围内  
      var foodX = parseInt(item.style.left)
      var foodY = parseInt(item.style.top) + item.offsetHeight
      //    公式x：食物x > 王公子x  && 食物x < 王公子x+自身宽度  //公式y：食物y+自身高度 > 王公子y
      if ( (foodX>wscX && foodX<=(wscX+wscObj.offsetWidth)) && foodY>wscY ) {
        var type = item.getAttribute('type');
        
        type == 'guanjun' ? score+=5 : score++ ;
        document.querySelector('.game-score h1:nth-of-type(2)').innerText = score + '分';
        document.body.removeChild(item) ;

        var divObj = document.createElement('div');
        divObj.className = 'show-score';
        divObj.innerText = type == 'guanjun' ? '+5' : '+1' ;
        divObj.style.left = wscX+wscObj.offsetWidth + 'px';
        document.body.appendChild(divObj);
        setTimeout(() => document.body.removeChild(divObj), 1000);
      }
      
    })
  })

  
  // 安排wsc
  document.onmousemove = function(evt) {
    // 获取事件对象
    var e = evt || window.event;
    var wscObj = document.querySelector('.wsc');
    //宽度
    var left = e.clientX - wscObj.offsetWidth/2;
    //最大网页宽度=网页宽度-wsc宽度
    var maxLeft = (window.innerWidth || document.documentElement.clientWidth) - wscObj.offsetWidth;
    // 当left小于0时，返回0 
    if (left<0) left = 0;
    if (left>=maxLeft) left = maxLeft;
    // 同步王思聪left为鼠标位置
    wscObj.style.left = left + 'px';

    // 重置wsc坐标
    wscX = left;
  }

  //  结束游戏
  var time = 10;
  function startTimePlay(){
    return setInterval(() => {
      time-- ;
      var gameScoreObj = document.querySelector('.game-score span');
      if (time>=0) {
        gameScoreObj.innerText = time;
      }else {
        // 清除游戏倒计时
        clearInterval(gameT)
        // 清除随机食物 
        clearInterval(foodT) 
        // 重置游戏
        time = 10;            
        // 展示面板
        var payPanel = document.querySelector('.play-panel');
        var payPanelStop = payPanel.querySelector('.stop');
        payPanel.querySelector('.score').innerText = score+'分';
        payPanel.style.display =  payPanelStop.style.display = 'block';
      }
    }, 1000)
  }
  var gameT = startTimePlay() ;

 
  //重新开始游戏
  var startBtn = document.querySelector('.play-panel .stop .btn');
  startBtn.onclick = function() {
    // 清空分数
    score = 0 ;            
    document.querySelector('.game-score h1:nth-of-type(2)').innerText = score +'分';
    // 开始游戏
    foodT = startFoodPlay() 
    gameT = startTimePlay()
    //提示
    var payPanel = document.querySelector('.play-panel');
    var payPanelStop = payPanel.querySelector('.stop');
    payPanel.style.display =  payPanelStop.style.display = 'none';
  }
  </script>
</body>
</html>